<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="addClickHandler">添加</el-button>

    <el-form :inline="true" :model="query" ref="queryForm"
             style="border-top:1px solid #dcdfe6;border-radius:2px;padding-top:20px;">
      <el-form-item label="院线名称：" prop="tenantId">
        <dict-input dict-key="DICT_TENANT" :current="query.tenant" @change="queryTenantSelectedHandler"/>
      </el-form-item>
      <el-form-item label="影院编码：" prop="cinemaCode">
        <el-input v-model="query.cinemaCode" placeholder="请输入影院编码" maxlength="8" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="影院名称：" prop="cinemaName">
        <el-input v-model="query.cinemaName" placeholder="请输入影院名称" maxlength="60" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryClickHandler">查 询</el-button>
        <el-button icon="el-icon-brush" @click="queryFormClearClickHandler">清 空</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="cinemaId" label="影院ID" width="80px"/>
      <el-table-column prop="cinemaCode" label="影院编码" width="120px"/>
      <el-table-column prop="cinemaName" label="影院名称" width="350px"/>
      <el-table-column prop="tenantName" label="院线名称" width="200px"/>
      <el-table-column prop="cinemaIp" label="影院IP" width="150px"/>
      <el-table-column prop="cinemaUid" label="影院UID" width="320px"/>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click.native.prevent="editClickHandler(scope.row)">编辑
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteClickHandler(scope.$index, scope.row)"
                         style="margin-left: 10px;">
            <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="total, prev, pager, next" style="padding-top: 10px;"
                   @current-change="currentPageChangeHandler"
                   :page-size="query.pageSize" :current-page="query.pageNumber" :total="query.total"/>

    <el-dialog title="提示" :visible.sync="isEditing" width="50%">
      <el-form :inline="true" :model="cinemaForm" ref="cinemaForm" class="cinemaForm" :rules="rules">
        <el-form-item label="院线名称：" label-width="120px" prop="tenant.id">
          <dict-input dict-key="DICT_TENANT" input-width="300px" :current="cinemaForm.tenant"
                      @change="editTenantSelectedHandler"/>
        </el-form-item>
        <el-form-item label="影院UID：" label-width="120px" prop="cinemaUid">
          <el-input v-model="cinemaForm.cinemaUid" placeholder="请输入影院UID" maxlength="36" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="影院编码：" label-width="120px" prop="cinemaCode">
          <el-input v-model="cinemaForm.cinemaCode" placeholder="请输入影院编码" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="影院名称：" label-width="120px" prop="cinemaName">
          <el-input v-model="cinemaForm.cinemaName" placeholder="请输入影院名称" maxlength="60" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="影院IP：" label-width="120px" prop="cinemaIp">
          <el-input v-model="cinemaForm.cinemaIp" placeholder="请输入影院IP" maxlength="100" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelClickHandler">取 消</el-button>
        <el-button type="primary" @click="saveClickHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DictInput from "@/components/internal/dict/DictInput";
import $api from "@/api/api-cinema";

export default {
  name: "Cinema",
  components: {DictInput},
  data() {
    return {
      query: {
        tenant: {
          id: null,
          name: null
        },
        cinemaCode: '',
        cinemaName: '',
        total: 0,
        pageSize: this.$store.state.pageSize,
        pageNumber: 1
      },
      tableData: [],
      isEditing: false,
      cinemaForm: {
        tenant: {
          id: null,
          name: null
        },
        cinemaId: null,
        cinemaUid: null,
        cinemaCode: null,
        cinemaName: null,
        cinemaIp: null
      },
      rules: {
        'tenant.id': [
          {required: true, message: '请选择院线', trigger: 'change'}
        ],
        cinemaUid: [
          {required: true, message: '请输入影院UID', trigger: 'blur'}
        ],
        cinemaCode: [
          {required: true, message: '请输入影院编码', trigger: 'blur'}
        ],
        cinemaName: [
          {required: true, message: '请输入影院名称', trigger: 'blur'}
        ],
        cinemaIp: [
          {required: true, message: '请输入影院IP', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.queryClickHandler();
  },
  methods: {
    queryTenantSelectedHandler(row) {
      this.query.tenant.id = row.id;
      this.query.tenant.name = row.name;
    },
    editTenantSelectedHandler(row) {
      this.cinemaForm.tenant.id = row.id;
      this.cinemaForm.tenant.name = row.name;
    },
    queryPageData() {
      let params = {
        tenantId: this.query.tenant.id,
        cinemaCode: this.query.cinemaCode,
        cinemaName: this.query.cinemaName,
        total: this.query.total,
        pageSize: this.query.pageSize,
        pageNumber: this.query.pageNumber
      };
      $api.page(params).then(page => {
        this.tableData = page.records;
        this.query.total = page.total;
      });
    },
    currentPageChangeHandler(num) {
      this.query.pageNumber = num;
      this.queryPageData();
    },
    queryClickHandler() {
      this.query.total = 0;
      this.query.pageNumber = 1;
      this.queryPageData();
    },
    queryFormClearClickHandler() {
      this.$nextTick(() => {
        this.query.tenant.id = null;
        this.query.tenant.name = null;
        this.query.cinemaCode = null;
        this.query.cinemaName = null;
      });
    },
    addClickHandler() {
      this.isEditing = true;
    },
    saveClickHandler() {
      this.$refs.cinemaForm.validate().then(() => {
        let params = {
          cinemaId: this.cinemaForm.cinemaId,
          tenantId: this.cinemaForm.tenant.id,
          cinemaUid: this.cinemaForm.cinemaUid,
          cinemaCode: this.cinemaForm.cinemaCode,
          cinemaName: this.cinemaForm.cinemaName,
          cinemaIp: this.cinemaForm.cinemaIp
        };
        return $api.save(params);
      }).then(() => {
        this.queryPageData();
        this.cancelClickHandler();
      });
    },
    cancelClickHandler() {
      this.isEditing = false;
      this.$nextTick(() => {
        this.cinemaForm.cinemaId = null;
        this.$refs.cinemaForm.clearValidate();
        this.$refs.cinemaForm.resetFields();
      });
    },
    editClickHandler(row) {
      this.isEditing = true;
      this.$nextTick(() => {
        this.cinemaForm.cinemaId = row.cinemaId;
        this.cinemaForm.tenant.id = row.tenantId;
        this.cinemaForm.tenant.name = row.tenantName;
        this.cinemaForm.cinemaUid = row.cinemaUid;
        this.cinemaForm.cinemaCode = row.cinemaCode;
        this.cinemaForm.cinemaName = row.cinemaName;
        this.cinemaForm.cinemaIp = row.cinemaIp;
      });
    },
    deleteClickHandler(index, row) {
      $api.del(row.cinemaId).then(() => {
        if (this.tableData.length <= 1) {
          this.query.pageNumber--;
        }
        this.queryPageData();
      });
    }
  }
}
</script>

<style scoped>
.cinemaForm .el-input {
  width: 300px;
}
</style>
